<template>
  <div class="plugin-container">
    <!-- 设置面板 -->
    <el-dialog
      :title="currentPlugin ? currentPlugin.title + '设置' : '插件设置'"
      :visible.sync="settingsVisible"
      width="30%"
      :before-close="closeSettings"
    >
      <div v-if="currentPlugin" class="settings-content">
        <div class="settings-header">
          <img :src="currentPlugin.icon" alt="icon" class="settings-icon" />
          <div class="settings-title">{{ currentPlugin.title }}</div>
        </div>
        <div class="settings-body">
          <!-- 根据不同插件类型显示不同设置选项 -->
          <template v-if="currentPlugin.title === '绿幕窗口'">
            <div class="settings-item">
              <span class="settings-label">窗口尺寸</span>
              <el-select v-model="greenScreenSettings.size" placeholder="请选择窗口尺寸">
                <el-option label="全屏" value="fullscreen"></el-option>
                <el-option label="16:9" value="16:9"></el-option>
                <el-option label="4:3" value="4:3"></el-option>
                <el-option label="1:1" value="1:1"></el-option>
              </el-select>
            </div>
            <div class="settings-item">
              <span class="settings-label">背景颜色</span>
              <el-color-picker v-model="greenScreenSettings.color"></el-color-picker>
            </div>
          </template>
          <div v-else class="settings-placeholder">
            该插件暂无可配置项
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeSettings">取消</el-button>
        <el-button type="primary" @click="saveSettings">确定</el-button>
      </span>
    </el-dialog>

    <!-- Green Screen Window Dialog -->
    <el-dialog
      :title="'羽鸿整蛊 - 绿幕窗口【禁止最小化】(按下Tab键可以管理视频列表)'"
      :visible.sync="greenScreenWindowVisible"
      :width="greenScreenDialogWidth"
      custom-class="green-screen-dialog"
      :modal="true"
      :show-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="true"
      :append-to-body="true"
      @keydown.tab.native.prevent="toggleComponentList"
      tabindex="0"
    >
      <div class="green-screen-content" :style="greenScreenContentStyle" @mouseup="stopDrag" @mousemove="onDrag">
        <!-- 显示上传的视频 -->
        <div 
          v-for="component in componentList" 
          :key="component.id" 
          v-show="component.visible && component.url" 
          class="video-component"
          :style="{
            width: component.width + 'px',
            height: component.height + 'px',
            left: component.x + 'px',
            top: component.y + 'px'
          }"
          @mousedown="startDrag($event, component)"
        >
          <video 
            :src="component.url" 
            autoplay 
            loop 
            muted 
            class="video-element"
          ></video>
        </div>
      </div>
      <!-- 组件列表面板 -->
      <div class="component-list-panel" v-show="showComponentList">
        <div class="component-list-header">
          <span>组件列表</span>
          <div>
            <el-button size="mini" type="primary" icon="el-icon-plus" @click="uploadVisible = true">上传视频</el-button>
            <i class="el-icon-close" @click="showComponentList = false"></i>
          </div>
        </div>
        <div class="component-list-body">
          <div v-for="(component, index) in componentList" :key="index" class="component-item">
            <span class="component-name">{{ component.name }}</span>
            <div class="component-actions">
              <i class="el-icon-refresh-right" @click="refreshComponent(component)" title="恢复原始尺寸"></i>
              <i class="el-icon-view" @click="toggleComponentVisibility(component)" title="切换显示/隐藏"></i>
              <i class="el-icon-zoom-in" @click="adjustSize(component, 10)" title="放大"></i>
              <i class="el-icon-zoom-out" @click="adjustSize(component, -10)" title="缩小"></i>
              <i class="el-icon-delete" @click="deleteComponent(component)" title="删除"></i>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 上传视频对话框 -->
      <el-dialog
        title="上传视频"
        :visible.sync="uploadVisible"
        width="30%"
      >
        <el-upload
          class="upload-video"
          action="#"
          :auto-upload="false"
          :on-change="handleVideoChange"
          :file-list="[]"
          multiple
          accept="video/*"
        >
          <el-button slot="trigger" size="small" type="primary">选择视频</el-button>
          <div slot="tip" class="el-upload__tip">请选择视频文件</div>
        </el-upload>
        <span slot="footer" class="dialog-footer">
          <el-button @click="uploadVisible = false">取消</el-button>
          <el-button type="primary" @click="uploadVisible = false">确定</el-button>
        </span>
      </el-dialog>
      <!-- Hiding footer as it's not specified in requirements -->
      <span slot="footer" class="dialog-footer" v-if="false"></span>
    </el-dialog>
    
    <el-card v-for="(plugin, index) in plugins" :key="index" :class="['plugin-card']">
      <div class="plugin-content">
        <div class="plugin-icon">
          <img :src="plugin.icon" alt="icon" />
        </div>
        <div class="plugin-details">
          <div class="plugin-title">{{ plugin.title }}</div>
          <div class="plugin-description">{{ plugin.description }}</div>
        </div>
        <div class="plugin-actions">
          <el-switch v-model="plugin.enabled" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          <i class="el-icon-setting plugin-settings-icon" @click="openSettings(plugin)"></i>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
    data() {
        return {
            settingsVisible: false,
            currentPlugin: null,
            showComponentList: false,
            componentList: [
                
            ],
            uploadVisible: false,
            draggedComponent: null,
            isDragging: false,
            startX: 0,
            startY: 0,
            greenScreenSettings: {
                size: '16:9',
                color: '#00FF00'
            },
            plugins: [
                {
                    icon: require('@/assets/image/plugin_icons/green_screen.svg'), // 替换为实际图标路径
                    title: '绿幕窗口',
                    description: '一个绿色的窗口, 用于展示视频、组件等效果',
                    enabled: false,
                },
                {
                    icon: require('@/assets/image/plugin_icons/accelerator.svg'), // 替换为实际图标路径
                    title: '加速度',
                    description: '通过设置队列到达数量, 让事件加速完成',
                    enabled: false,
                },
                {
                    icon: require('@/assets/image/plugin_icons/smash_gift.svg'), // 替换为实际图标路径
                    title: '砸礼物',
                    description: '收到礼物将礼物砸向屏幕的效果(2D)',
                    enabled: false,
                },
                {
                    icon: require('@/assets/image/plugin_icons/health_bar.svg'), // 替换为实际图标路径
                    title: '煮播血条',
                    description: '设置煮播血条, 增加互动性',
                    enabled: false,
                },
                {
                    icon: require('@/assets/image/plugin_icons/voice_broadcast.svg'), // 替换为实际图标路径
                    title: '语音播报',
                    description: '朗读直播间弹幕、礼物等信息',
                    enabled: false,
                },
                {
                    icon: require('@/assets/image/plugin_icons/danmu_helper.svg'), // 替换为实际图标路径
                    title: '弹幕助手',
                    description: '看直播间弹幕、礼物等信息',
                    enabled: false,
                },
                {
                    icon: require('@/assets/image/plugin_icons/e_wooden_fish.svg'), // 替换为实际图标路径
                    title: '电子木鱼',
                    description: '电子木鱼, 大家一起集功德',
                    enabled: false,
                },
                {
                    icon: require('@/assets/image/plugin_icons/fruit_machine.svg'), // 替换为实际图标路径
                    title: '水果机',
                    description: '怀旧水果机, 水果机盲盒',
                    enabled: false,
                },
                {
                    icon: require('@/assets/image/plugin_icons/gift_overlay.svg'), // 替换为实际图标路径
                    title: '礼物飘屏',
                    description: '在直播画面中推送礼物飘屏',
                    enabled: false,
                },
            ]
        };
    },

    computed: {
        greenScreenPlugin() {
            return this.plugins.find(p => p.title === '绿幕窗口');
        },
        greenScreenWindowVisible: {
            get() {
                return this.greenScreenPlugin ? this.greenScreenPlugin.enabled : false;
            },
            set(value) {
                if (this.greenScreenPlugin) {
                    this.greenScreenPlugin.enabled = value;
                }
            }
        },
        greenScreenDialogWidth() {
            if (this.greenScreenSettings.size === 'fullscreen') {
                return '500px'; // 宽度固定为559px
            }
            if (this.greenScreenSettings.size === '16:9') return '80vw';
            if (this.greenScreenSettings.size === '4:3') return '60vw';
            if (this.greenScreenSettings.size === '1:1') return '50vh'; // Assuming height-limited square
            return '50%'; // Default
        },
        greenScreenDialogHeight() {
            // This will be applied to the content div, dialog adjusts
            if (this.greenScreenSettings.size === 'fullscreen') {
                return '800px'; // 高度固定为900px
            }
            if (this.greenScreenSettings.size === '16:9') return 'calc(80vw * 9 / 16)';
            if (this.greenScreenSettings.size === '4:3') return 'calc(60vw * 3 / 4)';
            if (this.greenScreenSettings.size === '1:1') return '50vh'; // Square
            return '70vh'; // Default
        },
        greenScreenContentStyle() {
            return {
                backgroundColor: this.greenScreenSettings.color,
                width: '100%',
                height: this.greenScreenDialogHeight,
            };
        }
    },

    mounted() {

    },

    methods: {
        openSettings(plugin) {
            this.currentPlugin = plugin;
            this.settingsVisible = true;
        },
        closeSettings() {
            this.settingsVisible = false;
        },
        saveSettings() {
            // 保存设置逻辑
            this.$message({
                message: '设置已保存',
                type: 'success'
            });
            this.settingsVisible = false;
        },
        toggleComponentList() {
            // 切换组件列表显示状态
            this.showComponentList = !this.showComponentList;
        },
        refreshComponent(component) {
            // 刷新组件并恢复原始尺寸
            if (component.originalWidth && component.originalHeight) {
                component.width = component.originalWidth;
                component.height = component.originalHeight;
            }
            this.$message({
                message: `刷新组件: ${component.name}，已恢复原始尺寸`,
                type: 'success'
            });
        },
        
        // 删除视频组件
        deleteComponent(component) {
            const index = this.componentList.findIndex(item => item.id === component.id);
            if (index !== -1) {
                this.componentList.splice(index, 1);
                this.$message({
                    message: `已删除组件: ${component.name}`,
                    type: 'success'
                });
            }
        },
        toggleComponentVisibility(component) {
            // 切换组件可见性
            component.visible = !component.visible;
            this.$message({
                message: `${component.visible ? '显示' : '隐藏'}组件: ${component.name}`,
                type: 'info'
            });
        },
        
        // 处理视频上传
        handleVideoChange(file) {
            // 创建新的组件项
            const newComponent = {
                name: file.name,
                visible: true,
                id: Date.now(), // 使用时间戳作为唯一ID
                url: URL.createObjectURL(file.raw), // 创建本地URL
                width: 300,
                height: 200,
                originalWidth: 300, // 保存原始宽度
                originalHeight: 200, // 保存原始高度
                x: 50,
                y: 50
            };
            
            // 添加到组件列表
            this.componentList.push(newComponent);
            
            this.$message({
                message: `已添加视频: ${file.name}`,
                type: 'success'
            });
        },
        
        // 调整视频大小
        adjustSize(component, change) {
            // 增加或减少视频尺寸
            component.width = Math.max(100, component.width + change);
            component.height = Math.max(100, component.height + change);
        },
        
        // 开始拖拽
        startDrag(event, component) {
            this.isDragging = true;
            this.draggedComponent = component;
            this.startX = event.clientX - component.x;
            this.startY = event.clientY - component.y;
        },
        
        // 拖拽中
        onDrag(event) {
            if (this.isDragging && this.draggedComponent) {
                this.draggedComponent.x = event.clientX - this.startX;
                this.draggedComponent.y = event.clientY - this.startY;
            }
        },
        
        // 停止拖拽
        stopDrag() {
            this.isDragging = false;
            this.draggedComponent = null;
        }
        // handleGreenScreenClose method removed as visible.sync with computed property handles it
    },
};
</script>

<style lang="less" scoped>
.plugin-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
  background-color: #f0f2f5; // 与图片背景色类似
}

.plugin-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;

 

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
  }
}

.plugin-content {
  display: flex;
  align-items: center;
  padding: 15px;
}

.plugin-icon {
  margin-right: 15px;
  img {
    width: 48px; // 根据图片调整
    height: 48px; // 根据图片调整
    border-radius: 50%; // 使图标圆形
    background-color: #eee; // 图标背景色，如果图片透明
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.plugin-details {
  flex-grow: 1;
}

.plugin-title {
  font-size: 16px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.plugin-description {
  font-size: 12px;
  color: #606266;
  line-height: 1.4;
}

.plugin-actions {
  display: flex;
  align-items: center;
  gap: 15px; // 开关和设置图标之间的间距
}

.plugin-settings-icon {
  font-size: 20px;
  color: #909399;
  cursor: pointer;
  &:hover {
    color: #409EFF;
  }
}

// 确保el-card的默认padding不影响自定义布局
::v-deep .el-card__body {
  padding: 0 !important;
}

// 设置面板样式
.settings-content {
  padding: 10px;
}

.settings-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.settings-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  border-radius: 50%;
}

.settings-title {
  font-size: 18px;
  font-weight: bold;
}

.settings-body {
  margin-top: 20px;
}

.settings-item {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.settings-label {
  width: 80px;
  margin-right: 10px;
}

.settings-placeholder {
  text-align: center;
  color: #909399;
  padding: 20px 0;
}

// 自定义对话框样式
::v-deep .el-dialog__header {
  border-bottom: 1px solid #eee;
  padding: 15px 20px;
}

::v-deep .el-dialog__body {
  padding: 3px;
}

::v-deep .el-dialog__footer {
  border-top: 1px solid #eee;
  padding: 15px 20px;
}

/* Styles for the Green Screen Window */
.green-screen-dialog .el-dialog__header {
  /* Optional: customize header if needed */
}

.green-screen-dialog .el-dialog__body {
  padding: 0 !important; /* Remove default padding to allow content to fill */
  overflow: hidden; /* Prevent scrollbars unless content itself needs it */
  position: relative; /* 为组件列表面板定位做准备 */
}

.green-screen-content {
  display: flex; /* Optional: for centering if there was inner content */
  align-items: center; /* Optional */
  justify-content: center; /* Optional */
  /* width, height, and backgroundColor are set by :style="greenScreenContentStyle" */
}

/* 组件列表面板样式 */
.component-list-panel {
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.component-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #eee;
  background-color: #f5f7fa;
}

.component-list-header i {
  cursor: pointer;
  font-size: 16px;
  color: #909399;
}

.component-list-header i:hover {
  color: #409EFF;
}

.component-list-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
}

.component-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 5px;
  border-bottom: 1px solid #eee;
}

.component-name {
  font-size: 14px;
  color: #303133;
}

.component-actions {
  display: flex;
  gap: 10px;
}

.component-actions i {
  cursor: pointer;
  font-size: 16px;
  color: #909399;
}

.component-actions i:hover {
  color: #409EFF;
}

/* 视频组件样式 */
.video-component {
  position: absolute;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: move;
  transition: border-color 0.2s;
}

.video-component:hover {
  border-color: #409EFF;
}

.video-element {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 上传视频样式 */
.upload-video {
  text-align: center;
  margin: 20px 0;
}
</style>